<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue + Axios CORS Test</title>
    <!-- 引入Vue的CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入Axios的CDN -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

<div id="app">
    <h1>跨域测试</h1>
    <button @click="fetchData">获取数据</button>
    <div v-if="error">{{ error }}</div>
    <div v-if="data">{{ data }}</div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            data: null,
            error: null
        },
        methods: {
            fetchData() {
                axios.get('http://127.0.0.1:7201/api/consumer/test') // 替换为实际的跨域API地址
                    .then(response => {
                        this.data = response.data;
                        this.error = null;
                    })
                    .catch(error => {
                        this.data = null;
                        this.error = error.message;
                    });
            }
        }
    });
</script>

</body>
</html>